<template>
  <div id="app-content" :class="[$route.meta.noScroll && 'qmp-full-screen-no-roll']">
    <page-header />
    <div id="qmp-main">
      <router-view id="app-page-content" v-slot="{ Component, route }">
        <transition :name="route.meta.transitionName">
          <keep-alive :include="keepAlivePages">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
    <page-footer />
    <!-- 开发调试插件 -->
    <Vconsole />
  </div>
</template>

<script lang="ts" setup>
  import { Toast } from 'qmp-component'
  import { onBeforeMount, getCurrentInstance, watch, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from 'vuex'
  import PageHeader from '@/components/common/PageHeader'
  import PageFooter from '@/components/common/PageFooter'
  import Vconsole from '@/components/common/Vconsole.vue'

  const $router = useRouter()
  const $route = useRoute()
  const $store = useStore()
  const { proxy }: any = getCurrentInstance()

  // 路由切换，非缓存页面重置滚动位置
  watch(
    () => $route,
    (to) => {
      // 将去到的页面加入缓存
      if (to.name && to.meta.keepAlive && !keepAlivePages.value.includes(to.name)) {
        $store.commit('app/addKeepAlivePage', to.name)
      }
    },
    {
      deep: true,
      immediate: true
    }
  )

  // 需要缓存的页面名称列表（注意：需要缓存的页面必须要在路由中配置 keepAlive: true, 且路由中的name要与页面的name设置相同，且每个页面的name不要重复）
  const keepAlivePages = computed(() => {
    return $store.getters['app/keepAlivePages']
  })

  onBeforeMount(async () => {
    // 判断是否在移动应用平台app中打开
    try {
      const isQuanUBase: boolean = await proxy?.$nativeHandler('isQuanUBase', '')
      $store.commit('app/updateQuanUBase', isQuanUBase)
    } catch (error) {
      Toast('请在全友统一移动应用平台中使用：' + error)
      $router.replace('/404')
    }
    // 调用原生方法，获取原生app中的用户信息
    try {
      const userInfo: unknown = await proxy?.$nativeHandler('getBaseInfo', '')
      $store.commit('app/updateUserInfo', userInfo)
    } catch (error) {
      Toast('获取用户信息失败：' + error)
    }
  })
</script>
<style lang="less" scoped>
  // 禁止滚动
  .qmp-full-screen-no-roll {
    height: 100vh;
    overflow: hidden;
    #qmp-main {
      flex: 1;
      overflow: hidden;
    }
    #app-page-content {
      height: 100%;
      overflow: hidden;
    }
  }

  #app-content {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: var(--qmp-font-size-14);

    #qmp-main {
      position: relative;
      #app-page-content {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
  html,
  body {
    height: 100%;
    width: 100%;
    background-color: var(--qmp-gray-2);
  }
  * {
    margin: 0;
    padding: 0;
  }

  /* 页面切换动画 */
  .page-forward-enter-active,
  .page-forward-leave-active,
  .page-back-enter-active,
  .page-back-leave-active {
    will-change: transform;
    transition: all 150ms;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

  // 页面前进-进入过渡的开始状态
  .page-forward-enter-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  // 页面前进-进入过渡状态执行结束的状态
  .page-forward-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面前进-离开过渡的开始状态
  .page-forward-leave-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面前进-离开过渡状态执行结束的状态
  .page-forward-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  // 页面后退-进入过渡的开始状态
  .page-back-enter-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  // 页面后退-进入过渡状态执行结束的状态
  .page-back-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  // 页面后退-离开过渡的开始状态
  .page-back-leave-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  // 页面后退-离开过渡状态执行结束的状态
  .page-back-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
